<template>
	<view class="con-box">
		<u-navbar title="" height="120upx">
			<view class="u-nav-slot" slot="left">
				<view @tap="back" class="icon-left">
					<u-icon name="arrow-left" color="#000" size="20"></u-icon>
				</view>
			</view>
			<view class="u-nav-slot logoBox" slot="center">
				<view class="navBox">
					抢购详情
				</view>
			</view>
		</u-navbar>
		<view class="goods-desc">
			<view class="goods_details">
				<view class="title">
					<view>{{goodsDetails.billName}}</view>
				</view>
				<view class="lssue-price">
					<view class="lssue-item" style="margin-bottom: 30upx;">
						<view class="text">抢购价</view>
						<view class="num">{{goodsDetails.issuesPrice}}元/个</view>
					</view>
					<view class="lssue-item" style="margin-bottom: 30upx;">
						<view class="text">抢购总量</view>
						<view class="num">{{goodsDetails.planNumber}}/个</view>
					</view>
					<view class="lssue-item">
						<view class="text">剩余数量</view>
						<view class="num">{{goodsDetails.stock}}个</view>
					</view>
				</view>
			</view>

			<!-- 			<view class="processBox">
				<view class="title">抢购流程</view>
				<view class="processCont">
					<view :class="['item',goodsDetails.activityStatus>=1?'active':'']">
						<text>预约付款</text>
						<view class="num">1</view>
						<view class="date">{{moment(goodsDetails.startTime).format('MM/DD')}}</view>
						<view class="timers">{{moment(goodsDetails.startTime).format('HH:mm')}}</view>
					</view>
					<view :class="['item',goodsDetails.activityStatus>=2?'active':'']">
						<text>预约结束</text>
						<view class="num">2</view>
						<view class="date">{{moment(goodsDetails.endTime).format('MM/DD')}}</view>
						<view class="timers">{{moment(goodsDetails.endTime).format('HH:mm')}}</view>
					</view>
					<view :class="['item',goodsDetails.activityStatus>=3?'active':'']">
						<text>抽签公示</text>
						<view class="num">3</view>
						<view class="date">{{moment(goodsDetails.drawTime).format('MM/DD')}}</view>
						<view class="timers">{{moment(goodsDetails.drawTime).format('HH:mm')}}</view>
					</view>
				</view>
			</view> -->
			<!-- 			<view class="winningResult" @tap="show1 = true;recordType='中签结果'">
				<text>中签结果</text>
				<view>查看全部<u-icon class="iconf" name="arrow-right" color="#fff" size="30upx"></u-icon>
				</view>
			</view> -->
			<view class="applyDetail">
				<view class="title">抢购信息</view>
				<view class="info">
					<view class="name">积分代码</view>
					<view class="text">{{goodsDetails.billCode}}</view>
				</view>
				<view class="info">
					<view class="name">积分名称</view>
					<view class="text">{{goodsDetails.billName}}</view>
				</view>
				<view class="info">
					<view class="name">票务发行方</view>
					<view class="text">{{goodsDetails.enterpriseName}}</view>
				</view>
				<view class="info">
					<view class="name">最大抢购数量</view>
					<view class="text">{{goodsDetails.maxCount}}</view>
				</view>
				<view class="info">
					<view class="name">抢购开始时间</view>
					<view class="text">{{moment(goodsDetails.startDate).format('YYYY/MM/DD HH:mm:ss')}}</view>
				</view>
				<view class="info">
					<view class="name">抢购截止时间</view>
					<view class="text">{{moment(goodsDetails.endDate).format('YYYY/MM/DD HH:mm:ss')}}</view>
				</view>
				<view class="info">
					<view class="name">抢购中签时间</view>
					<view class="text">{{moment(goodsDetails.stockBallotDate).format('YYYY/MM/DD HH:mm:ss')}}</view>
				</view>
			</view>

			<view class="image-desc">
				<view class="title">
					<text>公司介绍</text>
				</view>
				<view v-html="goodsDetails.introduce"></view>
			</view>
			<view class="image-desc">
				<view class="title">
					<text>项目介绍</text>
				</view>
				<view v-html="goodsDetails.details"></view>
			</view>

			<!-- 			<view class="image-desc instructions">
				<view class="title">
					<text>购买须知</text>
				</view>
				<view class="instructions" v-html="instructions.content"></view>
			</view> -->
		</view>

		<view class="operating">
			<view class="date">
				<view class="">距离抢购时间结束：</view>
				<view class="text">
					<u-count-down :time="countdown" format="DD天HH时mm分ss秒" @change="(e)=>onChange(e)"
						@finish="finishFn()">
						<view class="time">
							<text class="time__item">{{ goodsDetails.timeData.days }}天</text>
							<text
								class="time__item">{{ goodsDetails.timeData.hours>=10?goodsDetails.timeData.hours:'0'+goodsDetails.timeData.hours}}时</text>
							<text class="time__item">{{ goodsDetails.timeData.minutes }}分</text>
							<text class="time__item">{{ goodsDetails.timeData.seconds }}秒</text>
						</view>
					</u-count-down>
				</view>
			</view>
			<view class="footBox">
				<view class="buttS">
					<view class="shopping0" v-if="!goodsDetails.izEnd" @tap="toShopping('sg')">
						<view>立即抢购</view>
					</view>
					<view class="shopping1" v-else>已结束</view>
				</view>
			</view>
		</view>

		<!-- 结果公布 -->
		<view class="prizePopup" v-if="show1">
			<u-popup :closeable="true" mode="bottom" :show="show1" @close="close" :round="0">
				<view class="prize">
					<view class="prizeTitle">中签结果</view>
					<view class="prizeBox">
						<scroll-view @scrolltolower="scrolltolower" scroll-y="true" style="width: 100%;height: 850upx;">
							<view class="prizeList">
								<view class="prizeItem">
									<view class="prizeText nameCt">
										<view class="">
											<image src="../../../static/common/header.png" mode="widthFix" class="img">
											</image>
										</view>
										<view class="">
											<text>王二麻子</text>
											<view class="date">2022-08-20 12:00:30</view>
										</view>
									</view>
									<view class="prizeText1">中签100个</view>
								</view>
								<view class="prizeItem">
									<view class="prizeText nameCt">
										<view class="">
											<image src="../../../static/common/header.png" mode="widthFix" class="img">
											</image>
										</view>
										<view class="">
											<text>王二麻子</text>
											<view class="date">2022-08-20 12:00:30</view>
										</view>
									</view>
									<view class="prizeText1">中签100个</view>
								</view>

							</view>
							<view class="msg">
								<image src="../../../static/home/line.png" mode="widthFix" class="left-line"></image>
								<text class="text">没有更多内容啦</text>
								<image src="../../../static/home/line.png" mode="widthFix" class="right-line"></image>
							</view>
						</scroll-view>
					</view>
				</view>
			</u-popup>
		</view>

		<!-- 二维码分享 -->
		<!-- 		<u-popup :show="show2" :customStyle="popupStyle" mode="center" @close="show2 = false">
			<view class="share-content">
				<view class="imgBlob" v-if="imgBlobData !== ''">
					<image :src="imgBlobData" mode="widthFix">
					</image>
					<text class="msg">长按保存到相册</text>
					<view class="guanbi" @tap="show2 = false;imgBlobData = ''"></view>
				</view>
				<view class="detailBox" id="share" v-show="imgBlobData == ''">
					<view class="cardBox">
						<image v-if="isImage(goodsDetails.fileUrl)" :src="goodsDetails.fileUrl" mode="scaleToFill"
							class="img"></image>
						<image v-else :src="goodsDetails.fileUrl+'?x-oss-process=video/snapshot,t_0,f_jpg'"
							mode="scaleToFill" class="img"></image>
					</view>
					<view class="info-box">
						<view class="desc_1">
							<view class="desc_1_1">
								<text>{{goodsDetails.collName}}</text>
							</view>
							<view class="desc_1_2">
								限量&nbsp;|&nbsp;{{goodsDetails.quotaNumber?goodsDetails.quotaNumber:"1"}}份</view>
						</view>
						<view class="desc_3">
							<view class="desc_3_2">
								<view class="headList">
									<image class="headItem" :src="goodsDetails.issuerHead[0]" mode="scaleToFill">
									</image>
									<text>{{goodsDetails.issuerName[0]}}</text>
								</view>
								<view class="source">￥<text>{{goodsDetails.price || 0}}</text></view>
							</view>
						</view>
						<view class="desc_4">
							<view class="logo">
								<image src="@/static/login/logo.png" mode="heightFix" class="img"></image>
								<text>中天富转让平台</text>
							</view>
							<view class="desc_4_2">
								<view class="desc_4_2_1" ref='desc_4_2_1'>
									<canvas id="qrcode" canvas-id="qrcode" />
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="save-share" v-show="imgBlobData == ''">
				<view class="shareTypeTitle">分享到</view>
				<view class="shareType">
					<view @tap="shareType(1)">
						<image src="@/static/detail/share1.png" mode="heightFix"></image>
						<view>复制链接</view>
					</view>
					<view @tap="shareType(2)">
						<image src="@/static/detail/share2.png" mode="heightFix"></image>
						<view>保存图片</view>
					</view>
				</view>
			</view>
		</u-popup> -->

		<!-- 画布 -->
		<!-- 		<view class="hideCanvasView">
			<canvas class="hideCanvas" id="default_PosterCanvasId" canvas-id="default_PosterCanvasId"
				:style="[isStyle('hideCanvas')]"></canvas>
		</view> -->

		<mix-loading ref="min_loading"></mix-loading>
		<u-toast ref="uToast"></u-toast>
		<!-- 
		<u-popup :show="model3dShow" @close="model3dShow = false;move()" bgColor="transparent" mode="center"
			round="20upx">
			<view class="model3dPopup">
				<iframe class="iframeBox" :src="`/hybrid/html/3d.html?modelUrl=${goodsDetails.coverImg}`"></iframe>
			</view>
		</u-popup> -->

		<view class="toastBox" v-show="errMsgShow">{{errMsg}}</view>
	</view>
</template>

<script>
	import {
		getnftapplyInfo,
		nftapplyOrderAdd,
		orderPay,
		getByOrderNo,
		getNfttypedrawLogList,
		getWeixinConfig,
		exapplyplanGet
	} from '@/api/home.js'
	import html2canvas from "html2canvas";
	import uQRCode from '@/common/uqrcode.js'
	import {
		nftuserlike,
		getNewsPageDetails,
		getAccountData,
		appfundaccountGetDetail,
		getUserPurchaseInfo
	} from '@/api/user.js'
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import wx from 'jweixin-module';
	import sha1 from '@/common/sha1.js';
	export default {
		data() {
			return {
				model3dShow: false,
				miney_list: [{
						id: 0,
						name: ''
					},
					{
						id: 1,
						name: ''
					},
					{
						id: 2,
						name: ''
					},
					{
						id: 3,
						name: ''
					},
					{
						id: 4,
						name: ''
					},
					{
						id: 5,
						name: ''
					},
				],
				moneyAll: 0,
				userAccount: {},
				errMsg: "",
				errMsgShow: false,
				errMsgTime: null,
				payPas: {
					orderId: "",
					type: "3",
					payPsw: "",
					setFocus: false,
				},
				instructions: {},
				show: false,
				show1: false,
				show2: false,
				isEnd: false,
				showType: 1,
				percentage: {
					num: 0,
					percent: 100
				},
				countdown: 500,
				background: '',
				resMsg: '',
				isKeepWaiting: false,
				isKeepWaitingShow: false,
				integer: '9',
				timerList: {
					time: null,
					timer: null,
				},
				copywriting: '目前抢购人数太多，请耐心等待。',
				copywritingList: [
					'用小鞭子抽共识算法中',
					'恶意节点弃暗投明中',
					'处理哈希算法与共识算法早恋问题中',
					'摔打智能合约中',
					'共识算法尝试突破光速',
					'共识节点线上会议决策中',
					'尝试突破共识算法',
					'智能合约正在拒绝二义性解释',
					'共识节点正在自我修复',
					'已极速发射抢购信号',
					'智能合约高效执行中',
					'安全地搬运转让数据中',
					'数据处理速度已经飙到极限了',
					'转让签名的艺术价值鉴定中',
					'正在吸引更多洞藏家进入',
					'元宇宙基础架构建设中',
					'正在尝试破解哈希谜题',
					'智能合约自我学习成长中',
					'正在将更多创意融入区块中',
					'智能合约寻找创作灵感中',
				],
				rgb: '255,255,255,.15',
				isBuy: false, //是否是抢购页面
				goodsList: [],
				recordType: '',
				imgBlobData: '',
				popupStyle: {
					height: "1216upx",
					width: "670upx",
					background: "rgba(0,0,0, 0)"
				},
				avatarUrl: '',
				nickName: '',
				goodsDetails: {
					isCollection: false,
					applyTag: [],
					issuerHead: [],
					issuerName: [],
					metafile: {}
				},
				listQuery: {
					page: 1,
					pageSize: 10,
					pages: 1,
					id: "",
					isPrize: "1", //是否中签 1是0否 2抢购中
				},
				goAppletUrl: null,
				isWxOpen: false,
				goodsInfo: {}
			};
		},
		onLoad(options) {
			let data = uni.getStorageSync('applyInfo');
			this.getPurchaseInfo()
			// 判断是否开始 true为开始
			data.izEnd = null;
			if (this.moment(new Date()).isAfter(data.startDate)) {
				// 判断是否结束
				if (this.moment(data.endDate).format('YYYY-MM-DD') == '2099-01-01') {
					data.izEnd = 1
				} else if (this.moment(new Date()).isBefore(data.endDate)) {
					data.izEnd = false
					this.countdown = this.moment(data.endDate).diff(new Date().getTime())
				} else {
					data.izEnd = true
				}
			}

			data.timeData = {
				days: 0,
				hours: 0,
				milliseconds: 0,
				minutes: 0,
				seconds: 0
			}
			if (data.details) {
				data.details = data.details.replace(
					/\<img /gi,
					'<img class="rich_pages" '
				)
			}
			if (data.introduce) {
				data.introduce = data.introduce.replace(
					/\<img /gi,
					'<img class="rich_pages" '
				)
			}
			this.goodsDetails = data;
	
			// this.getData(options.id);
			// this.getInstructions();
			// this.pageId = options.id;
			// this.getConfig();
			
		},
		computed: {
			...mapState(["hasLogin", "uerInfo", "h5Data"]),
			userData() {
				let data = {};
				if (this.$store.state.hasLogin && this.$store.state.uerInfo) {
					data = this.$store.state.uerInfo;
					data["avatarUrl"] = data.headPortraitUrl ? this.pathImg + data.headPortraitUrl : require(
						"../../../static/detail/avatar.png");
					data["name"] = data.nickname;
					this.avatarUrl = data.avatarUrl;
					this.nickName = data.name;
				}
				return data;
			},
		},
		methods: {
			getPurchaseInfo() {
				getUserPurchaseInfo({
					billCode: "221914"
				}).then(res => {
					if (res.data && res.data.obj) {
						const obj = res.data.obj;
						this.goodsDetails.maxCount = obj.maxCount;
						this.goodsDetails.hotNumber = obj.hotNumber;
						this.goodsDetails.level = obj.level;
						this.goodsDetails.yearDayPrice = obj.yearDayPrice;		
						this.goodsDetails.maxNumber = 0;		
					}
				})
			},
			//禁止页面滑动
			stop() {
				var box = function(e) {
					passive: false;
				};
				document.body.style.overflow = 'hidden';
				document.addEventListener("touchmove", box, false);
			},
			//允许页面滑动
			move() {
				var box = function(e) {
					passive: false
				};
				document.body.style.overflow = ''; //出现滚动条
				document.removeEventListener("touchmove", box, false);
			},
			onChange(e) {
				this.goodsDetails.timeData = e
			},
			finishFn() {
				if (!this.goodsDetails.izStart) {
					this.goodsDetails.izStart = true
				}
				if (this.moment(this.goodsDetails.endDate).format('YYYY-MM-DD') == '2099-01-01') {
					this.goodsDetails.izEnd = true
				} else if (this.moment(this.goodsDetails.endDate).isBefore(new Date())) {
					this.goodsDetails.izEnd = false
					// this.getSeriesList(1, this.pageSize)
				} else {
					this.goodsDetails.izEnd = true
					this.countdown = this.moment(this.goodsDetails.endDate).diff(new Date())
				}
			},
			input_num() {
				const that = this;
				that.miney_list.forEach((item, index) => {
					for (var i = 0; i < that.payPas.payPsw.length; i++) {
						if (i == index) {
							that.miney_list[index].name = '*';
						}
					}
				})
			},
			errMsgHide() {
				clearTimeout(this.errMsgTime);
				this.errMsgTime = null;
				this.errMsgTime = setTimeout(() => {
					this.errMsgShow = false;
				}, 2000);
			},

			setImgShow(cur) {
				if (cur.metafile.FileType) {
					if (cur.metafile.FileType == ".glb") {
						return 3;
					} else if (cur.metafile.FileType == ".mp4") {
						return 2;
					} else {
						return 1;
					}
				}
				return 0;
			},
			endTimer() {
				this.goodsDetails.activityStatus = 1;
			},
			// wx api 注册
			getConfig() {
				var ua = window.navigator.userAgent.toLowerCase();
				getWeixinConfig({}).then(res => {
					if (res.data.success) {
						let configData = res.data.obj;
						this.goAppletUrl = configData.split(',')[2];
						if (ua.match(/MicroMessenger/i) == 'micromessenger') { // 微信中打开
							// this.isWxOpen = true;
							// let timestamp = new Date().getTime(),
							// 	webUrl = location.origin;
							// let signature = `jsapi_ticket=${configData.split(',')[1]}&noncestr=cdwjsszcpjypth5noncestr&timestamp=${timestamp}&url=${webUrl}`;

							// wx.config({
							// 	debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
							// 	appId: "wx6320d1a81129e420", // 必填，公众号的唯一标识，填自己的！
							// 	timestamp:timestamp, // 必填，生成签名的时间戳
							// 	nonceStr: "cdwjsszcpjypth5noncestr", // 必填，生成签名的随机串
							// 	signature:sha1(signature), // 必填，签名
							// 	jsApiList: ['wx-open-launch-weapp'],
							// 	// ,'showMenuItems','scanQRCode','openEnterpriseChat', 'openEnterpriseContact'
							// 	openTagList: ['wx-open-launch-weapp'] // 跳转小程序时必填
							// });

							// wx.ready(res => {
							// 	console.log("1"+JSON.stringify(res));
							// 	this.$nextTick(() => {
							// 		let btn = document.getElementById('launch-btn');
							// 		btn.addEventListener('launch', e => {
							// 			console.log('success');
							// 		});
							// 		btn.addEventListener('error', e => {
							// 			alert('小程序打开失败');
							// 			console.log('fail', e.detail);
							// 		});
							// 	});
							// });

							// wx.error(error => {
							// 	console.log(error);
							// });
						} else { // 普通浏览器中打开
							this.isWxOpen = false;
						}
					} else {

					}
				}).catch(err => {});
			},
			goApplet(i) {
				if (this.goodsDetails.isSee == 0) {
					this.$u.toast("购买后方可查看！");
					return;
				}
				if (i == 0) {
					location.href = this.goAppletUrl;
				} else {
					this.$u.toast("开发中，敬请期待！");
					return;
				}
			},
			getInstructions() { //购买须知
				getNewsPageDetails({
					categoryId: 53
				}).then(res => {
					if (res.data.success) {
						this.instructions = res.data.obj;
					}
				});
			},
			collectionChange(i) {
				// 1发售2抢购3转售4用户
				nftuserlike({
					id: this.pageId,
					type: 2
				}).then(res => {
					if (res.data.success) {
						this.goodsDetails["isCollection"] = !this.goodsDetails["isCollection"];
						this.$u.toast(i == 1 ? '收藏成功' : "已取消");
					} else {

					}
				}).catch(err => {});
			},
			getDrawLogList() { //获取中签结果
				this.listQuery.id = this.pageId;
				getNfttypedrawLogList(this.listQuery).then(res => {
					if (res.data.success) {
						this.listQuery.pages = res.data.obj.pages;
						let newList = res.data.obj.list;

						if (newList.length == 0 || newList.length == 1) {
							this.isEnd = true;
						}
						if (newList.length == 0) {
							return;
						}
						if (this.listQuery.page == 1) {
							this.goodsList = [...newList];
						} else {
							this.goodsList = [...this.goodsList, ...newList];
						}
					} else {

					}
				}).catch(err => {});
			},
			setDate(n) { //设置时间
				let timer = "";
				let date = new Date(n);
				let y = date.getFullYear();
				let m = date.getMonth() + 1;
				let d = date.getDate();
				let h = date.getHours();
				let mm = date.getMinutes();
				timer = add0(y) + '-' + add0(m) + '-' + add0(d) + ' ' + add0(h) + ':' + add0(mm);

				function add0(m) {
					return m < 10 ? '0' + m : m
				}
				return timer;
			},
			getData(id) {
				this.$nextTick(() => {
					this.$refs.min_loading.open('加载中，请稍后！');
				});
				exapplyplanGet({
					id
				}).then(res => {
					if (res.data.success) {
						let data = res.data.obj;
						// if(data.activityStatus == 2){
						this.getDrawLogList();
						// }
						if (data.applyTag) {
							let labelList = data.applyTag.split(',');
							data["applyTag"] = labelList.filter((im, i) => {
								return im;
							});
						}
						if (data.applyInfo) {
							data.applyInfo = ((data.applyInfo).split(',')).map(item => {
								item = this.pathImg + item;
								return item;
							});
						}

						if (data.issuerHead) {
							data.issuerHead = ((data.issuerHead).split(',')).map(item => {
								item = this.pathImg + item;
								return item;
							});
						}
						if (data.issuerName) {
							data.issuerName = ((data.issuerName).split(',')).map(item => {
								item = item;
								return item;
							});
						}
						if (data.metafile) {
							data.metafile = JSON.parse(data.metafile);
						}
						// 判断是否开始 true为开始
						if (this.moment(data.startTime).isBefore(new Date())) {
							// 判断是否结束 true为结束
							if (this.moment(data.endTime).format('YYYY-MM-DD') == '2099-01-01') {} else if (this
								.moment(data.endTime).isBefore(new Date())) {} else {
								this.countdown = this.moment(data.endTime).diff(new Date());
							}
						} else {
							this.countdown = this.moment(data.startTime).diff(new Date())
						}
						if (data.fileUrl) {
							data.fileUrl = this.pathImg + data.fileUrl;
						}
						if (data.coverImg) {
							data.coverImg = this.pathImg + data.coverImg;
						}
						this.applyId = data.applyId;

						data["isCollection"] = data.isLike == 1 ? true : false;
						this.goodsDetails = data;
						this.moneyAll = data.price;
					} else {

					}
				}).catch(err => {

				}).finally(() => {
					this.$refs.min_loading.close();
				});
			},
			isStyle(data, izSellOut) {
				if (data == 'con-box') {
					return {
						'backgroundColor': this.background
					}
				} else if (data == 'goods-image') {
					return {
						'box-shadow': this.rgb
					}
				} else if (data == 'color-line') {
					return {
						'width': this.percentage.percent + '%'
					}
				} else if (data == 'btn') {
					if (izSellOut == 4) {
						return {
							'width': '100%'
						}
					} else {
						return {
							'width': '80%'
						}
					}
				}
			},
			goSeriesDetail() {
				uni.navigateTo({
					url: '/pages/detail/seriesDetail?id=' + this.applyId
				});
			},
			shareType(i) {
				if (i == 1) {
					let urls = location.href;
					uni.setClipboardData({
						data: urls,
						success: () => {
							this.show2 = false;
						}
					});
				} else {
					this.goPoster();
				}
			},
			// 生成图片
			async goPoster() {
				this.$refs.min_loading.open("图片生成中...");
				this.download();
			},
			async download() {
				const convertToImage = (container, options = {}) => {
					// 设置放大倍数
					const scale = window.devicePixelRatio;
					// 传入节点原始宽高
					const _width = container.offsetWidth;
					const _height = container.offsetHeight;
					// html2canvas配置项
					const ops = {
						width: _width - 2,
						height: _height - 2,
						useCORS: true,
						x: 1,
						y: 1,
						// allowTaint: false,
						dpi: 300,
						scale
						//   ...options,
					};
					return html2canvas(container, ops).then((canvas) => {
						// 返回图片的二进制数据
						return canvas.toDataURL("image/png");
					});
				};
				const imgBlobData = await convertToImage(document.querySelector('#share'));
				this.imgBlobData = imgBlobData;
				// setTimeout(()=>{
				this.$refs.min_loading.close();
				// },2000);
			},
			// 生成分享图片
			// 判断藏品是否是图片
			isImage(url) {
				if (url) {
					// console.log(url)
					let filePath = url.toLocaleLowerCase();
					if (filePath.indexOf(".mp4") != -1) {
						return false;
					} else {
						return true;
					}
				} else {
					return
				}
			},
			toShopping(type) { //立即抢购
				// if(this.goodsDetails.soldNumber >= this.goodsDetails.planNumber){
				// 	this.$u.toast('已售罄');
				// }else{
				// uni.navigateTo({
				// 	url: '/pages/snapped/detail/confirmOrder'
				// })
				// }
				console.log("# this.goodsDetails#" + JSON.stringify(this.goodsDetails))
				uni.setStorage({
					key:"applyInfo",
					data:this.goodsDetails,
					success(){
						uni.navigateTo({
							url: '/pages/snapped/detail/confirmOrder'
						})
					}
				});
			},
			back() {
				let canNavBack = getCurrentPages();
				if (canNavBack && canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					});
				} else {
					history.back();
				}
			},
			guanbi() { //关闭抢购弹窗
				this.show = false;
				this.showType = 1;
				this.payPas.setFocus = false;
				this.isKeepWaiting = false;
				clearInterval(this.timerList.timer);
				clearTimeout(this.timerList.time);
				this.timerList.time = null;
				this.timerList.timer = null;
			},
			// 到达底部
			scrolltolower() {
				if (this.listQuery.pages > this.listQuery.page) {
					this.listQuery.page++;
					this.getDrawLogList();
				} else {
					this.isEnd = true;
				}
			},
			async shareFx() { //生成分享二维码
				this.show2 = true;
				let urls = location.href;
				setTimeout(() => {
					let modules = uQRCode.getModules({
						text: urls,
						errorCorrectLevel: uQRCode.errorCorrectLevel.L
					})
					let tileSize = 2.2
					// 获取绘图所需的上下文
					let ctx = uni.createCanvasContext('qrcode', this)
					// 开始绘制
					ctx.setFillStyle('#FFFFFF')
					ctx.fillRect(0, 0, 67, 67);
					for (var row = 0; row < modules.length; row++) {
						for (var col = 0; col < modules.length; col++) {
							// 计算每一个小块的位置
							var x = col * tileSize
							var y = row * tileSize
							var w = tileSize
							var h = tileSize

							var style = modules[row][col] ? '#000000' : '#FFFFFF'
							ctx.setFillStyle(style)
							ctx.fillRect(x, y, w, h)
						}
					}
					ctx.draw()
					// setTimeout(() => {
					// 	this.share();
					// }, 500)
					return;
				}, 200)
			}
		},
		onUnload() {
			this.move();
			clearInterval(this.timerList.timer);
			clearTimeout(this.timerList.time);
			this.timerList.time = null;
			this.timerList.timer = null;
		}
	}
</script>

<style lang="scss" scoped>
	.con-box {
		height: auto;
		padding-top: 120upx;
		padding-bottom: 40upx;

		.model3dPopup {
			width: 96vw;
			height: 600upx;
			border-radius: 20upx;
			position: relative;
			overflow: hidden;

			.iframeBox {
				width: 100%;
				height: 100%;
				border-radius: 20upx;
				border: 0 none;
			}
		}

		.toastBox {
			position: fixed;
			top: 50%;
			left: 50%;
			z-index: 99999;
			width: auto;
			max-width: 600upx;
			font-size: 24upx;
			padding: 16upx 30upx;
			transform: translate(-50%, -50%);
			background-color: #000;
			border-radius: 10upx;
			color: #fff;
		}

		.foot {
			text-align: center;
			color: #999;
		}

		.hideCanvasView {
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: -1;
		}

		.logoBox {
			width: 100%;
			height: 100%;

			.navBox {
				height: 120upx;
				background-color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				box-shadow: 0px 0px 1px 0px rgba(51, 51, 51, 0.5000);
			}
		}

		.icon-right {
			padding-top: 30upx;
			padding-right: 10upx;

			.backImg-right {
				display: flex;
				justify-content: flex-end;
				align-items: center;

				image {
					width: 34upx;
					height: 30upx;
				}

				.share {
					width: 38upx;
					height: 38upx;
					margin-left: 20upx;
				}
			}
		}

		.goods-image {
			width: 100%;
			position: relative;

			>view {
				width: 100%;
				height: 716upx;
				overflow: hidden;
			}

			.img {
				width: 100%;
				height: 100%;
				display: block;
			}

			.iframeBox {
				width: 100%;
				height: 100%;
				border: 0 none;
			}

			.videoBox {
				width: 100%;
				display: block;
				height: 716upx;
				max-height: 716upx;

				/deep/.uni-video-container {
					background-color: transparent;
				}
			}
		}

		.goods-desc {
			width: 100%;
			height: auto;
			padding-bottom: 60upx;
			position: relative;
			z-index: 2;

			.goods_details {
				text-align: center;
				position: relative;
				background-color: #fff;
				padding: 32upx 30upx;

				.title {
					font-size: 36upx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #C09B3A;
					text-align: left;
					padding-bottom: 40upx;
				}

				.lssue-price {
					width: 100%;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;

					.lssue-item {
						width: 47%;
						display: flex;
						align-items: center;
						// justify-content: space-between;
						font-size: 28upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #666666;

						.text {
							flex: 3;
							text-align: left;
						}

						.num {
							color: #333333;
							text-align: right;
							flex: 2;
						}
					}
				}
			}

			.applyDetail {
				margin-top: 20upx;
				width: 100%;
				padding: 30upx 32upx;
				background-color: #fff;

				.title {
					font-size: 32upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					margin-bottom: 40upx;
				}

				.info {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					line-height: 60upx;
					font-size: 28upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
					white-space: nowrap;

					.text {
						color: #333333;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
					}
				}
			}

			.processBox {
				background-color: #fff;
				margin-top: 15upx;
				padding: 0upx 30upx;
				padding-bottom: 30upx;

				.processCont {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 12upx;

					.item {
						text-align: center;
						vertical-align: top;

						.num {
							width: 34upx;
							height: 34upx;
							border-radius: 50%;
							text-align: center;
							line-height: 34upx;
							background-color: #2C1769;
							margin: 0 auto;
							color: #fff;
							font-weight: 800;
							font-size: 24upx;
							margin-bottom: 10upx;
							margin-top: 16upx;
							position: relative;
						}

						.num::after {
							content: "";
							display: block;
							width: 256upx;
							height: 4upx;
							background-color: #D1CCDE;
							position: absolute;
							top: 50%;
							margin-top: -2upx;
							right: 34upx;
						}

						.date {
							background-color: #2C1769;
							height: 24upx;
							border-radius: 12upx;
							padding: 0 10upx;
							font-size: 20upx;
							line-height: 24upx;
							color: #fff;
						}

						.timers {
							color: #2C1769;
							font-size: 20upx;
						}

						>text {
							display: inline-block;
							line-height: 24upx;
							font-size: 24upx;
							color: #2C1769;
						}
					}

					.active {

						.num,
						.date,
						.num::after {
							background-color: #EB5703;
							color: #fff;
						}

						>text,
						.timers {
							color: #EB5703;
						}
					}

					.item:nth-of-type(1) {
						.num::after {
							display: none;
						}
					}
				}

				.title {
					font-size: 30upx;
					color: #111;
					font-weight: 800;
					padding-top: 32upx;
					padding-bottom: 28upx;
				}
			}

			.winningResult {
				background-color: #CEA539;
				color: #fff;
				margin-top: 20upx;
				padding: 32upx 30upx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.iconf {
					margin-left: 10upx;
					line-height: 30upx;
				}

				view {
					height: 30upx;
					line-height: 30upx;
					display: flex;
					align-items: center;
					font-size: 30upx;
				}

				text {
					font-size: 45upx;
					font-family: PingFang SC;
					font-weight: 800;
				}
			}

			.infoBox {
				margin-top: 15upx;
				background-color: #fff;
				padding: 4upx 30upx;
				font-size: 24upx;

				>view {
					display: flex;
					justify-content: space-between;
					align-items: center;

					view {
						color: rgba($color: #414141, $alpha: 0.61);
						padding-top: 32upx;
						padding-bottom: 30upx;
						border-bottom: 1px solid #F7F7F7;

						text {
							color: #414141;
							margin-left: 38upx;
						}
					}
				}

				view:last-child {
					border: 0 none;
				}
			}

			.scrollIssuer {
				width: 100%;
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;
				margin-top: 15upx;
				background-color: #fff;
				padding: 8upx 30upx;

				.holder-info {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;
					border-bottom: 1px solid #F7F7F7;
					padding-top: 26upx;
					padding-bottom: 16upx;

					.contLeft {
						display: flex;
						align-items: center;
						justify-content: flex-start;
					}

					.img {
						border-radius: 50%;
						height: 40upx;
						width: 40upx;
						box-shadow: 0 0 6px 3px rgba(0, 0, 0, 0.1);
					}

					.desc {
						padding-left: 10upx;

						.desc_1 {
							font-family: PingFang SC;
							font-size: 24upx;
							color: #414141;

							text {
								font-size: 18upx;
								background-color: #2b267f;
								color: #fff;
								display: inline-block;
								height: 24upx;
								padding: 0 12upx;
								line-height: 24upx;
								text-align: center;
								border-radius: 20upx;
								margin-left: 17upx;
							}
						}

						.desc_2 {
							font-family: PingFang SC;
							font-size: 16upx;
							color: rgba($color: #414141, $alpha: 0.42);
							width: 100%;
						}
					}
				}

				.holder-info:last-child {
					border: 0 none;
				}
			}

			.privilegeBox {
				margin-top: 15upx;
				background-color: #fff;
				padding: 0upx 30upx;
				padding-bottom: 40upx;

				.titles {
					font-size: 30upx;
					color: #111;
					font-weight: 800;
					padding-top: 32upx;
					padding-bottom: 36upx;
				}

				.contents {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 40upx;

					.privilege {
						text-align: center;
					}
				}

				image {
					width: 58upx;
				}
			}

			.image-desc {
				width: 100%;
				height: auto;
				background-color: #fff;
				padding: 30upx;
				margin-bottom: 20upx;
				margin-top: 20upx;
				overflow: hidden;

				.title {
					font-size: 32upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					margin-bottom: 40upx;
				}

				.show-image {
					width: 100%;
					margin-bottom: 26upx;
					height: auto;
					padding: 0upx 18upx;

					.img {
						width: 100%;
					}
				}

				.show-image:last-child {
					margin-bottom: 0;
				}
			}
		}

		.operating {
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 9;
			// height: 132upx;
			background-color: #fff;
			color: #000;

			.date {
				width: 100%;
				height: 60upx;
				background: #FAF6EB;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;

				.text {
					color: #C09B3A;
				}
			}

			.footBox {
				// height: 100%;
				width: 100%;
				padding: 20upx 50upx 20upx;

				.buttS {
					width: 100%;
				}

				.shopping0 {
					height: 80upx;
					background: #CEA539;
					border-radius: 10upx;
					width: 100%;
					text-align: center;
					font-size: 32upx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.shopping1 {
					height: 80upx;
					background: #BCBCBC;
					border-radius: 10upx;
					width: 100%;
					text-align: center;
					font-size: 32upx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.priceCont {
					display: flex;
					align-items: center;

					.price {
						font-weight: 600;
						font-size: 80upx;

						text {
							font-size: 44upx;
						}
					}

					.numb {
						padding-top: 40upx;
						font-size: 20upx;
						margin-left: 12upx;
					}
				}
			}
		}

		.modeTitle {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 30upx;
			padding: 0 30upx;
			color: #fff;
			height: 100upx;
			background-color: #2C1769;
		}

		.payPasTitle {
			font-size: 40upx;
			color: #2C1769;
			position: relative;
			background-color: #fff;

			.closeIcon {
				position: absolute;
				top: 30upx;
				right: 30upx;
			}

			text {
				padding-top: 30upx;
				font-weight: 800;
				display: block;
				text-align: center;
			}
		}

		.shop-tips {
			background-color: #fff;
			min-height: 760upx;
			position: relative;

			.step1 {
				padding-top: 170upx;

				text {
					display: block;
					margin-top: 30upx;
					color: #333;
					font-size: 30upx;
				}
			}

			.step2 {
				padding: 0 30upx;

				.tips {
					font-size: 24upx;
					color: #666;
					line-height: 34upx;
					margin-top: 22upx;
					margin-bottom: 10upx;
				}

				.goods {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-bottom: 26upx;

					.info {
						flex: 1%;
						text-align: left;
						display: flex;
						flex-wrap: wrap;
						align-content: space-between;
						min-height: 160upx;
						padding: 10upx 0;
						padding-left: 20upx;

						.name {
							font-size: 34upx;
							color: #111;
							width: 100%;
						}

						text {
							font-size: 24upx;
							color: #666;
						}
					}

					image {
						width: 160upx;
						height: 160upx;
						border-radius: 10upx;
					}
				}

				.items {
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 64upx;

					>text {
						font-size: 24upx;
						color: #333;
					}

					.address,
					.myMoney {
						color: #999;
						font-size: 24upx;
					}

					.price {
						font-size: 30upx;
						color: #EB5703
					}

					.numb {
						display: flex;
						justify-content: flex-end;

						input {
							width: 50upx;
							font-size: 24upx;
							color: #333333;
							line-height: 40upx;
							height: 40upx;
							margin: 0 10upx;
						}

						text {
							font-size: 24upx;
							display: inline-block;
							width: 40upx;
							line-height: 40upx;
							height: 40upx;
							background-color: #666;
							color: #fff;
						}
					}
				}
			}

			.step3 {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 50upx;
				margin-top: 100upx;

				.password {
					width: 100%;
					height: 100upx;
					position: relative;

					.flex {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.password_num {
							width: 100upx;
							height: 100upx;
							line-height: 100upx;
							display: flex;
							align-items: center;
							justify-content: center;
							background-color: #999;

							.inputCont {
								display: flex;
								align-items: center;

								.miney_data {
									width: 20upx;
									height: 20upx;
									background-color: #000000;
									border-radius: 50%;
								}
							}

						}
					}
				}

				.password input {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					opacity: 0;
				}
			}

			.footBn {
				width: 100%;
				padding: 0 30upx;
				position: absolute;
				bottom: 40upx;
				left: 0;

				>view {
					font-size: 30upx;
					color: #fff;
					text-align: center;
					line-height: 80upx;
					height: 80upx;
				}

				.style1 {
					background-color: #999;
				}

				.style2 {
					background-color: #eb5703;
				}
			}

			.tip-image {
				width: 100%;
				text-align: center;

				image {
					width: 132upx;
					height: 132upx;
				}
			}
		}
	}


	.prize {
		width: 100%;
		height: 980upx;
		position: relative;
		background: #fff;
		color: #333;
		padding-top: 40upx;
		border-radius: 30upx 30upx 0 0 !important;

		.prizeTitle {
			width: 100%;
			font-size: 32upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			text-align: center;
		}

		.prizeBox {
			margin: 30upx 0 22upx 0;

			.msg {
				text-align: center;
				font-size: 24upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #BCBCBC;
				margin-top: 30upx;
				display: flex;
				align-items: center;
				justify-content: center;

				.text {
					margin: 0 20upx;
				}

				.left-line {
					width: 100upx;
				}

				.right-line {
					width: 100upx;
					transform: rotate(-180deg);
				}

				// padding-bottom: 100upx;
			}

			.prizeList {
				padding: 0 30upx;

				.prizeItem {
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1px solid #F7F7F7;
					padding: 18upx 0;
					font-size: 28upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;

					.prizeTime {
						display: flex;
						align-items: center;

						text {
							color: #EB5703;
							margin-right: 10upx;
						}
					}

					.date {
						font-size: 24upx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #666666;
					}

					.prizeText1 {
						font-size: 30upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #D33332;
					}

					.nameCt {
						text-align: left;
						display: flex;
						align-items: center;

						view {
							color: #666;
						}

						.img {
							width: 68upx;
							margin-right: 12upx;
						}
					}
				}
			}
		}
	}

	.guanbi {
		width: 50upx;
		height: 50upx;
		position: absolute;
		top: 40upx;
		right: 40upx;
		background: url(../../../static/user/guanbi.png) no-repeat center center;
		background-size: 100% 100%;
		z-index: 9999;
	}

	.share-content {
		width: 100%;
		position: relative;

		.imgBlob {
			position: relative;
			width: 100%;
			height: 100%;
			z-index: 99;
			border-radius: 40upx;

			.msg {
				font-size: 24upx;
				font-weight: 400;
				color: #ffffff;
				text-align: center;
				opacity: 0.7;
				// margin-top: 20upx;
				position: absolute;
				width: 100%;
				left: 0;
				bottom: -60upx;
			}

			image {
				display: block;
				width: 100%;
				height: 100%;
				border-radius: 40upx;
			}

			.guanbi {
				width: 50upx;
				height: 50upx;
				position: absolute;
				top: 40upx;
				right: 40upx;
				background: url('https://hry-hyperchain-public.oss-cn-beijing.aliyuncs.com/file/hdStatic/user/guanbi.png') no-repeat center center;
				background-size: 100% 100%;
				z-index: 999;
			}
		}

		.detailBox {
			transition: all 0.3s;
			width: 100%;
			background-color: #fff;
			border-radius: 40upx;
			padding-bottom: 30upx;
			position: relative;
			z-index: 1;
			overflow: hidden;

			.cardBox {
				width: 100%;
				height: 560upx;
				margin-bottom: 30upx;
				overflow: hidden;
				display: flex;
				align-items: center;
				border-top-left-radius: 40upx;
				border-top-right-radius: 40upx;

				image {
					display: block;
					width: 100%;
					height: 100%;
					margin: 0 auto;
				}
			}

			.info-box {
				width: 100%;
				padding: 0 30upx;

				.desc_1 {
					width: 100%;
					color: #333;

					.desc_1_1 {
						font-size: 30upx;
						width: 100%;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						-o-text-overflow: ellipsis;
					}

					.desc_1_2 {
						margin-top: 20upx;
						display: inline-block;
						padding: 0 10upx;
						background: #3B3B3B;
						border-radius: 6upx;
						font-size: 20upx;
						height: 44upx;
						line-height: 44upx;
						color: #FBA05D;
					}
				}

				.desc_3 {
					.desc_3_2 {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 30upx;

						.headList {
							display: flex;
							align-items: center;

							.headItem {
								width: 40upx;
								height: 40upx;
								border-radius: 50%;
								overflow: hidden;
							}

							text {
								padding-left: 6upx;
								color: #666;
								font-size: 24upx;
							}
						}

						.source {
							margin-left: 10upx;
							color: #333;
							font-size: 24upx;

							text {
								font-size: 36upx;
							}
						}
					}
				}

				.desc_4 {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					margin-top: 20upx;

					.logo {
						display: flex;
						justify-content: start;
						align-items: center;
						font-size: 26upx;

						.img {
							height: 40upx;
							margin-right: 10upx;
						}
					}

					.desc_4_2 {
						width: 180upx;
						display: flex;
						flex-direction: column;
						justify-content: center;

						.desc_4_2_1 {
							width: 138upx;
							height: 138upx;
							margin: 0 auto;
							padding: 2upx;
							background-color: #fff;

							image {
								width: 100%;
								height: 100%;
							}

							#qrcode {
								width: 134upx;
								height: 134upx;
							}
						}
					}
				}
			}
		}
	}

	.save-share {
		transition: all 0.3s;
		margin-top: 40upx;

		.shareTypeTitle {
			text-align: center;
			color: #fff;
			font-size: 32upx;
		}

		.shareType {
			display: flex;
			justify-content: center;
			justify-content: center;
			margin-top: 40upx;

			>view {
				display: inline-block;
				text-align: center;
				margin: 0 40upx;

				image {
					height: 100upx;
				}

				view {
					line-height: 28upx;
					margin-top: 24upx;
					color: rgba(255, 255, 255, 0.8);
					font-size: 28upx;
				}
			}
		}
	}
</style>
